<style lang="less">
  .press-release-dialog {

  .hideDiv {
    display: none;
  }

  .mbigdiv {
    margin: 0 auto;
    width: 80%;
  }

  .mtitleh {
    height: 50px;
  }

  .textcenter {
    text-align: center;
  }

  .mpad {
    padding-top: 20px;
  }

  .mbottom {
    border-bottom: 2px solid #DFE6EC;
  }

  .titletext {
    font-weight: bold;
    font-size: 18px;
  }

  .hig {
    min-height: 30px;
    color: #666666;
    font-size: 12px;
  }

  .littlesize {
    font-size: 8px;
  }

  .hei {
    height: 100px;
  }

  .mar {
    margin-top: 10px;
  }

  .fr {
    float: right;
  }

  .whiteb {
    border: 10px solid white;
  }

  .mh {
    min-height: 90px;
  }

  .mheight {
    min-height: 40px;
  }

  .mbor {
    border-bottom: 1px solid #EEEFF3;
  }

  .mbla {
    background-color: #F5F6FA;
  }

  .mhe {
    height: 45px;
  }

  .mw {
    width: 40px;
    float: left;
  }

  .pt {
    padding-top: 10px;
  }

  .namept {
    padding-top: 12px;
  }

  .mla {
    margin-left: 40px;
  }

  .mbutton {
    disabled: disabled;
  }

  .mcomment {
    min-height: 10px;
    margin-left: 40px;
    padding-right: 8px;
  }

  .likenum {
    float: left;
    margin-top: 13px;
  }

  .mt {
    margin-top: 5px;
  }

  .displayClss {
    display: none;
  }
  .mhd {
    margin-bottom: 10px;height: 35px;
  }
  .mbt {
    float: right;margin-right: 20px;
  }
  .rev {
    float: right;margin-right: 5px
  }
  .child {
    background-color: #E4E4E4;
    margin-left: 40px;
    /*min-height: 50px;*/
    margin-right: 5px;
    margin-bottom: 10px;
    border-bottom: 10px solid #F5F6FA
  }
  .chil {
    min-height: 40px;
    padding: 5px;
    border-bottom: 1px solid #D7D7D7
  }
  .cont {
    margin-top: 5px;
    margin-left: 40px;
    min-height: 100px;
  }

  }
</style>
<template>
  <div class="press-release-dialog">
    <div class="mbigdiv">
      <div class="mtitleh textcenter mpad mbottom">
        <label class="titletext">{{pressReleasDetail.title}}</label>
      </div>
      <div class="textcenter hig mt">
        <label class="littlesize">
          公告来源：{{pressReleasDetail.title}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          发表于{{pressReleasDetail.createDate}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          阅读&nbsp;|&nbsp;{{pressReleasDetail.readNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          点赞&nbsp;|&nbsp;{{pressReleasDetail.likeNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          评论&nbsp;|&nbsp;{{pressReleasDetail.commentNum}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </label>
      </div>
      <div>
        <label id="mlabel" class="ql-editor"></label>
        <div v-bind:class="{hideDiv:fileList.length == 0}">
          <div style="width: 80px;float: left">附件列表：</div>
          <div style="margin-left: 80px">
            <template v-for="(item,index) in fileList">
              <a v-bind:href="item.url" :key="index">{{item.name}}</a>
            </template>
          </div>
        </div>
      </div>
      <el-card>
        <label v-if="commentList.length == 0">
          <div class="textcenter">暂无评论</div>
        </label>
        <div class="whiteb">
          <template v-for="(o,index) in commentList">
            <div class="mh" :key="index">
              <div class="mheight mbor mbla">
                <div class="textcenter mhe mw"><img src="../../assets/headPicture.png" class="mar" height="25px"
                                                    width="25px"></div>
                <div>
                  <div class="hig namept">
                    <label>{{o.userName}}</label>
                  </div>
                  <div class="mcomment">{{o.commentContent}}</div>
                </div>
              </div>
              <div class="hig mbla pt" >
                <div class="mhd">
                  <label class="mla">评论时间：{{o.commentTime}}</label>
                  <el-button v-if="o.status === 111002002" type="primary"  class="mbt"
                             @click="changeStatus(o)">
                    <label style="font-size: 2px;">审核</label>
                  </el-button>
                  <el-button v-if="o.status === 111002001" type="primary" class="mbt"
                             @click="addNewComment(o)">
                    <label style="font-size: 2px;">回复</label>
                  </el-button>
                  <el-button v-if="o.status === 111002001" type="primary" class="rev"
                             @click="changeStatus(o)">
                    <label style="font-size: 2px;">撤销审核</label>
                  </el-button>
                </div>
                <div>
                  <div v-if="o.children.length !== 0" class="child">
                    <div v-for="(item,index) in o.children" class="chil" :key="index">
                      <el-row :gutter="20">
                        <el-col :span="20">
                          <div class="grid-content">
                            <label style="color: blue">{{item.userName}}</label>&nbsp;&nbsp;&nbsp;{{item.commentTime}}&nbsp;回复<br>
                            <label>{{item.commentContent}}</label>
                          </div>
                        </el-col>
                        <el-col :span="4" >
                          <div class="grid-content" style="margin-top: 10%">
                            <el-button type="danger" @click="deleteCommentReply(item.id)" >删除</el-button>
                          </div>
                        </el-col>
                      </el-row>

                    </div>
                  </div>
                </div>
                <div v-if="flag === true" style="border-bottom: 10px solid white">
                  <div v-if="o.addCommentVisiable === true" class="cont">
                    <el-input type="textarea" v-model="comment.commentContent" :rows="2" resize="none"></el-input>
                    <el-button type="primary" @click="addComment(o)" style="padding-right: 5px" class="mar fr">提交
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div style="cursor: pointer;" class="textcenter" @click="addCount"
             v-bind:class="{hideDiv: commentList.length < 1}">更多评论信息∨
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import {
  deleteCommentReply,
  addNewComment,
  getCurrentPressRelease,
  getCommentsContainReply,
  searchPressReleaseFileByPressReleaseId,
  changeStatus
} from '../../api/v3/PressRelease';
export default{
  data () {
    return {
      token: this.$store.state.token,
      flag: false,
      addCommentVisiable: false,
      id: null,
      pressReleasDetail: {},
      commentList: [],
      fileList: [],
      comment: {
        commentContent: '',
        userId: '',
        pressReleaseId: '',
        commentTime: '',
        pid: ''
      },
      commentUserIdList: [],
      page: 1,
      size: 3,
      count: 1,
      pageSize: 3
    };
  },
  props: {
    title: {}
  },
  watch: {
    title (val) {
      this.getPressRelease(val);
    }
  },
  methods: {
    getPressRelease (val) {
      this.id = val.id;
      getCurrentPressRelease(val.id).then((res) => {
        if (res.data) {
          this.pressReleasDetail = res.data;
          if (this.pressReleasDetail.content !== null) {
            document.getElementById('mlabel').innerHTML = this.pressReleasDetail.content;
          }
        }
        searchPressReleaseFileByPressReleaseId(this.id).then((res) => {
          if (res.data) {
            this.fileList = res.data;
          }
        });
      });
      this.commentList = [];
    },
    deleteCommentReply (val) {
      deleteCommentReply(val).then((res) => {
        if (res.data) {
          this.$message.success('删除成功');
          this.getPressReleaseCommentList();
        }
      });
    },
    changeStatus (val) {
      changeStatus(val.id).then((res) => {
        if (res.data) {
          this.getPressReleaseCommentList();
        }
      });
    },
    addComment (val) {
      let id = val.pressReleaseId;
      if (this.comment.commentContent === null || this.comment.commentContent === '') {
        this.$message('评论内容不能为空!');
        return;
      }
      this.comment.pid = val.id;
      addNewComment(this.comment).then((res) => {
        if (res.data) {
          this.$message({
            type: 'success',
            message: '评论成功'
          });
        }
        this.comment.commentContent = '';
        this.getPressReleaseCommentList(id);
        this.flag = false;
        this.id = id;
      });
    },
    addNewComment (val) {
      this.flag = false;
      val.addCommentVisiable = false;
      this.flag = true;
      val.addCommentVisiable = true;
    },
    // 点击加载更多
    addCount () {
      this.count = this.count + 1;
      this.size = this.count * this.pageSize;
      this.getPressReleaseCommentList();
    },
    // 查询本条新闻的所有评论
    getPressReleaseCommentList () {
      getCommentsContainReply({
        id: this.id,
        page: this.page - 1,
        size: this.size
      }).then((res) => {
        if (res.data) {
          this.commentList = res.data;
          for (let p in this.commentList) {
            this.commentList[p].addCommentVisiable = false;
          }
          this.commentUserIdList = this.commentList.map(o => o.userId);
        }
      });
    }
  },
  mounted () {
    this.getPressRelease(this.title);
    this.getPressReleaseCommentList();
  }
};
</script>
